<template>
	<view class="uy-bubble" :style="[{position: position}, bubbleStyle]" v-if="isShow">
		<u-transition :show="true">
			<view class="uy-bubble_box" :style="{width: `${this.width}rpx`}">
				<view class="triangle" :style="triangleStyle"></view>
				<scroll-view scroll-y="true" class="uy-bubble_content" :style="[itemStyle]">
					<slot />
				</scroll-view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	/**
	 * @description 气泡
	 * @property {Number, String} width  气泡宽度  默认260  单位rpx
	 * @property {Number, String} height  气泡高度  默认160  单位rpx
	 * @property {String} bgColor  背景色  默认#FFFFFF 
	 * @property {Number, String} size  自定义字体大小  默认32  单位rpx 
	 * @property {String} color  自定义字体颜色  默认#333333
	 * @property {Number, String} triangleSize 三角箭头大小  默认40  单位rpx 
	 * @property {String} direction  三角箭头方向 top left right bottom
	 * @property {Number, String} triangleLeft  三角箭头定位left值 
	 * @property {Number, String} triangleRight  三角箭头定位right值 
	 * @property {Number, String} triangleTop  三角箭头定位top值 
	 * @property {Number, String} triangleBottom  三角箭头定位bottom值 
	 * @property {Number, String} radius  自定义圆角  默认10  单位rpx
	 * @property {Number, String} bulgeTop 三角箭头凸出高度  默认0 值越大凸出越小，最大不超过triangleSize值
	 * @property {String} position  定位 relative absolute fixed 
	 */
	export default {
		name:"uni-bubble",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			width: {
				type: [Number, String],
				default: 260
			},
			height: {
				type: [Number, String],
				default: 160
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			size: {
				type: [Number, String],
				default: 32
			},
			color: {
				type: String,
				default: '#333333'
			},
			triangleSize: {
				type: [Number, String],
				default: 20
			},
			direction: {
				type: String,
				default: 'top'
			},
			triangleLeft: {
				type: [Number, String],
				default: 0
			},
			triangleRight: {
				type: [Number, String],
				default: 0
			},
			triangleTop: {
				type: [Number, String],
				default: 0
			},
			triangleBottom: {
				type: [Number, String],
				default: 0
			},
			radius: {
				type: [Number, String],
				default: 0
			},
			bulgeTop: {
				type: Number,
				default: 0
			},
			position: {
				type: String,
				default: 'fixed'
			},
			top: {
				type: [Number, String],
				default: 0
			},
			bottom: {
				type: [Number, String],
				default: 0
			},
			left: {
				type: [Number, String],
				default: 0
			},
			right: {
				type: [Number, String],
				default: 0
			},
			zIndex: {
				type: [Number, String],
				default: 99
			}
		},
		data() {
			return {
				isShow: this.show
			};
		},
		computed: {
			bubbleStyle() {
				return {top: `${this.top}px`, bottom: `${this.bottom}px`, right: `${this.right}px`, zIndex: this.zIndex}
			},
			itemStyle() {
				return {width: `${this.width}rpx`, height: `${this.height}rpx`, backgroundColor: this.bgColor, fontSize: `${this.size}rpx`, borderRadius: `${this.radius}rpx`, color: this.color}
			},
			triangleStyle() {
				let str, direction;
				direction = `${this.direction}: -${Number(this.triangleSize) * 2 - Number(this.bulgeTop)}rpx;`;
				if(this.triangleLeft) {
					direction += `left: ${this.triangleLeft}rpx;`;
				} else if(this.triangleRight) {
					direction += `right: ${this.triangleRight}rpx;`;
				} else if(this.triangleTop) {
					direction += `top: ${this.triangleTop}rpx;`;
				} else if(this.triangleBottom) {
					direction += `bottom: ${this.triangleBottom}rpx;`;
				} else {
					if(this.direction == 'top' || this.direction == 'bottom') {
						direction += `left: 0; right: 0;margin: auto;`
					} else {
						direction += `top: 0; bottom: 0;margin: auto;`
					}
				}
				str = `
					border: ${this.triangleSize}rpx solid transparent;
					border-${this.direction}: ${this.triangleSize}rpx solid ${this.bgColor};
					${direction}
				`;
				return str
			}
		},
		watch: {
			show(val) {
				this.isShow = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uy-bubble {
		
		&_box {
			position: relative;
		}
		
		&_content {
			position: relative;
			z-index: 99;
		}
	}
	
	.triangle {
		width: 0;
		height: 0;
		position: absolute;
		z-index: 99;
		transform: rotate(180deg);
	}
</style>